<template>
	<view class="user">
		<view class="user-bg">
			<image style="width: 750rpx;height: 142rpx;" src="https://csg-icon.oss-cn-hangzhou.aliyuncs.com/bg1.png" mode="widthFix"></image>
		</view>
		<view class="item1">
			<view class="item1-info" @click="myClick">
				<view class="info-avatar"><image style="width: 140rpx;height:140rpx;" :src="userData.avatar" mode="aspectFill"></image></view>
				<view class="info-base">
					<view class="info-nickname">{{userData.nickname?userData.nickname:'未登录'}}</view>
					<view class="info-sign">{{userData.sign?userData.sign:'立即前往登录'}}</view>
				</view>
				<view class="info-icon">
					<!-- <u-image width="44rpx" height="44rpx" :src="userInfo.icon" mode="widthFix" shape="circle"></u-image> -->
					<u-icon name="arrow-right" color="#666666" size="40"></u-icon>
				</view>
			</view>
			<view class="item1-sum">
				<view class="sum-item">
					<view class="item-num">{{userMessage.follow?userMessage.follow:0}}</view>
					<view class="item-text">关注</view>
				</view>
				<view class="sum-item">
					<view class="item-num">{{userMessage.fans?userMessage.fans:0}}</view>
					<view class="item-text">粉丝</view>
				</view>
				<view class="sum-item">
					<view class="item-num">{{userMessage.suck?userMessage.suck:0}}</view>
					<view class="item-text">吸宠</view>
				</view>
				<view class="sum-item">
					<view class="item-num">{{userMessage.trends?userMessage.trends:0}}</view>
					<view class="item-text">动态</view>
				</view>
			</view>
		</view>
		<view class="item2">
			<view class="item2-adopt">
				<view class="adopt-title">宠物领养</view>
				<view class="adopt-item">
					<view class="item" v-for="(item, index) in adoptItem" :key="index" @click="adoptItemClick(index)">
						<view><image style="width: 44rpx; height: 44rpx;" :src="item.img"></image></view>
						<view>{{item.text}}</view>
					</view>
				</view>
			</view>
			<view class="item2-line"></view>
			<view  class="item2-fun">
				<view class="fun-title">我的功能</view>
				<view class="fun-item">
					<view class="item" v-for="(item, index) in funItem" :key="index" @click="funItemClick(index)">
						<view><image style="width: 44rpx; height: 44rpx;" :src="item.img"></image></view>
						<view>{{item.text}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	import adopt1 from '../../static/user/adopt1.png'
	import adopt2 from '../../static/user/adopt2.png'
	import adopt3 from '../../static/user/adopt3.png'
	import adopt4 from '../../static/user/adopt4.png'
	import icon1 from '../../static/user/icon1.png'
	import icon2 from '../../static/user/icon2.png'
	import icon3 from '../../static/user/icon3.png'
	import icon4 from '../../static/user/icon4.png'
	import icon5 from '../../static/user/icon5.png'
	
	export default {
		data () {
			return {
				userMessage: {},
				userData: {},
				adoptItem: [
					{
						img: adopt1,
						text: '我的发布'
					},
					{
						img: adopt2,
						text: '我的申请'
					},
					{
						img: adopt3,
						text: '领养协议'
					},
					{
						img: adopt4,
						text: '领养码'
					}
				],
				funItem: [
					{
						img: icon1,
						text: '日记管理',
						num: ''
					},
					{
						img: icon2,
						text: '我的宠物',
						num: ''
					},
					{
						img: icon3,
						text: '我的草稿',
						num: 7
					},
					{
						img: icon4,
						text: '我的收藏',
						num: ''
					},
					{
						img: icon5,
						text: '联系客服',
						num: ''
					}
				]
			}
		},
		onPullDownRefresh() {
			this.getUserInfo()
			this.getUserMessage()
			setTimeout(function () {
				uni.showToast({
					title: '刷新成功',
					duration: 1500,
					icon: 'none'
				})
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 选项
			funItemClick (index) {
				if(index == 4){
					uni.makePhoneCall({
					    phoneNumber: '18270006275' //仅为示例
					});
					return false
				}
				if(uni.getStorageSync('login')){
					switch(index) {
						case 0: 
							uni.navigateTo({
							    // url: './components/diary'
								url: '../../myPackageA/user/components/diary'
							});
							break;
						case 1:
							uni.navigateTo({
							    url: '../../myPackageA/pet/myPet/myPet'
							});
							break;
						case 2:
							uni.navigateTo({
							    url: '../../myPackageA/user/draft/draft'
							});
							break;
						case 3:
							uni.navigateTo({
							    url: '../../myPackageA/user/collect/collect'
							});
							break;
					}
				}else{
					uni.navigateTo({
						url: '../../myPackageA/user/login/index'
					})
				}
			},
			// 宠物领养
			adoptItemClick (index) {
				if(uni.getStorageSync('login')){
					uni.navigateTo({
					    // url: './components/adopt?index=' + index
					    url: '../../myPackageA/user/components/adopt?index=' + index
					});
				}else{
					uni.navigateTo({
						url: '../../myPackageA/user/login/index'
					})
				}
				
			},
			// 个人主页点击事件
			myClick () {
				if(uni.getStorageSync('login')){
					const uid = uni.getStorageSync('uid');
					uni.navigateTo({
					    url: '../../myPackageA/user/components/profile?uid=' + uid
					});
				}else{
					uni.navigateTo({
						url: '../../myPackageA/user/login/index'
					})
				}
			},
			// 获取用户统计信息
			getUserMessage () {
				const uid = uni.getStorageSync('uid');
				this.$request(this.commonApi.userMessage + uid, 'GET').then(res => {
					this.userMessage = res.data.data
				})
			}, 
			getUserInfo(){
				const uid = uni.getStorageSync('uid')
				this.$request(this.commonApi.userInfo + uid,'GET').then(res=>{
					this.userData = res.data.data
				})
			}
		},
		onShow() {
			let token = uni.getStorageSync('token')
			if (!token) {
				uni.navigateTo({
					url:'/myPackageA/user/login/index'
				})
				return false
			} else {
				this.getUserInfo()
				this.getUserMessage()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user {
		background-color: #F9FAF9;
		position: relative;
		height: 100vh;
		.user-bg {
			width: 750rpx;
			height: 412rpx;
			border-radius: 0px 0px 20rpx 20rpx;
		}
		.item1 {
			padding: 0 30rpx 30rpx 30rpx;
			position: absolute;
			top: 160rpx;
			width: 100%;
			.item1-info {
				display: flex;
				align-items: center;
				.info-avatar {
					width: 148rpx;
					height: 148rpx;
					background-color: #fff;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						border-radius: 50%;
					}
				}
				.info-base {
					flex: 5;
					margin-left: 24rpx;
					height: 102rpx;
					display: flex;
					justify-content: space-between;
					flex-direction: column;
					.info-nickname {
						font-size: 36rpx;
						font-weight: 700;
						color: #424242;
						line-height: 40rpx;
					}
					.info-sign {
						font-size: 26rpx;
						font-weight: 400;
						color: #424242;
						line-height: 36rpx;
						overflow:hidden;
						text-overflow:ellipsis;
						white-space:nowrap;
						width: 420rpx;
					}
				}
				.info-icon {
					flex: 1;
					display: flex;
					flex-direction: row-reverse;
				}
			}
			.item1-sum {
				width: 690rpx;
				height: 150rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;
				.sum-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-evenly;
					height: 90rpx;
					width: 157rpx;
					.item-sum {
						font-size: 36rpx;
						font-weight: 500;
						color: #333333;
						line-height: 50rpx;
					}
					.item-text {
						font-size: 28rpx;
						font-weight: 400;
						color: #999999;
						line-height: 40rpx;
						letter-spacing: 2rpx;
					}
				}
			}
		}
		.item2 {
			width: 690rpx;
			height: 592rpx;
			background: #FFFFFF;
			box-shadow: 0 0 12rpx 0 #F3F3F3;
			border-radius: 20rpx;
			margin-top: 105rpx;
			margin-left: 30rpx;
			padding-top: 30rpx;
			.item2-adopt {
				.adopt-title {
					font-size: 28rpx;
					font-weight: 700;
					color: #333333;
					line-height: 40rpx;
					letter-spacing: 2rpx;
					margin-left: 24rpx;
				}
				.adopt-item {
					display: flex;
					justify-content: space-between;
					padding: 32rpx 0;
					.item {
						height: 90rpx;
						width: 157rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;
						font-size: 26rpx;
						font-weight: 400;
						color: #323232;
						line-height: 36rpx;
					}
				}
			}
			.item2-line {
				width: 630rpx;
				height: 2rpx;
				border-bottom: 2rpx solid #F6F6F6;
				margin-left: 30rpx;
			}
			.item2-fun {
				margin-top: 30rpx;
				.fun-title {
					font-size: 28rpx;
					font-weight: 700;
					color: #333333;
					line-height: 40rpx;
					letter-spacing: 2rpx;
					margin-left: 24rpx;
				}
				.fun-item {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					.item {
						width: 157rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: center;
						padding: 30rpx 0;
						height: 148rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #323232;
						line-height: 36rpx;
					}
				}
			}
		}
	}
</style>
